BootStrap
Marcos Alvarães
Bootstrap 3
Professor / Formador Marcos Alvarães 2
O que é Bootstrap?
Professor / Formador Marcos Alvarães 3
O que é Web
Design
Responsivo?
Professor / Formador Marcos Alvarães 4
Exemplo de Bootstrap.1
Professor / Formador Marcos Alvarães 5
Histórico de bootstrap
Professor / Formador Marcos Alvarães 6
Porque usar o Bootstrap?
Professor / Formador Marcos Alvarães 7
CDN bootstrap
• Se não quiser fazer o download e
hospedar o Bootstrap, pode incluí-lo de
um CDN (Content Delivery Network).
• MaxCDN fornece o suporte CDN para
CSS e JavaScript do Bootstrap. Deve-
se também incluir o jQuery.
Professor / Formador Marcos Alvarães 9
Professor / Formador Marcos Alvarães 10
Para Criar uma
página com
bootstrap
1. Adicione o doctype HTML5
• O Bootstrap utiliza elementos HTML e
propriedades CSS que exigem o
doctype HTML5.
• Inclua sempre o doctype HTML5 no
início da página, junto com o atributo
lang e o conjunto de caracteres
correto.
Professor / Formador Marcos Alvarães 11
Bootstrap 3
prioriza os
dispositivos
móveis
• O Bootstrap 3 foi projetado para ser responsivo com dispositivos
móveis. Os estilos que priorizam o smartphone fazem parte da estrutura
principal.
• Para garantir a renderização e zoom de toque adequados, adicione a
seguinte <meta> tag dentro do elemento <head>.
• A parte width=device-width define a largura da página para seguir a
largura da tela do dispositivo (que irá variar dependendo do dispositivo).
• A parte initial-scale=1 define o nível de zoom inicial quando a página é
carregada pela primeira vez pelo navegador.
Professor / Formador Marcos Alvarães 12
Recipientes
O bootstrap também requer um
elemento de contenção para
envolver o conteúdo do site.
Existem duas classes de contêiner
para escolher.
A classe .container fornece
um contêiner de largura
fixa responsivo.
A classe .container-fluid fornece
um contêiner de largura total ,
abrangendo toda a largura da janela
de visualização
Professor / Formador Marcos Alvarães 13
O exemplo seguinte mostra o código para uma
página Bootstrap básica (com um contêiner de
largura fixa responsivo)
Professor / Formador Marcos Alvarães 14
Exemplo de Bootstrap.2
Professor / Formador Marcos Alvarães 15
O exemplo seguinte mostra o código para uma página
Bootstrap básica (com um contêiner de largura total)
Professor / Formador Marcos Alvarães 16
Exemplo de Bootstrap.3
Professor / Formador Marcos Alvarães 17
Bootstrap 3 vs.
Bootstrap 4
• Classes de grid
Professor / Formador Marcos Alvarães 19
Bootstrap 4
Professor / Formador Marcos Alvarães 20
Bootstrap 4
Grids
Professor / Formador Marcos Alvarães 21
O sistema de grade do Bootstrap 4 permite até 12
colunas na página.
Professor / Formador Marcos Alvarães 22
Classes de grid
• O sistema de grade Bootstrap 4 tem
cinco classes.
• As classes podem ser combinadas para
criar layouts mais dinâmicos e flexíveis.
• Dica: Cada classe aumenta, então se
desejar definir as mesmas larguras para
sm e md, você só precisa especificar sm.
Professor / Formador Marcos Alvarães 23
Estrutura Básica de uma Grid Bootstrap 4
Professor / Formador Marcos Alvarães 24
Colunas iguais
Professor / Formador Marcos Alvarães 25
Exemplo de Bootstrap.4
Professor / Formador Marcos Alvarães 26
Colunas Responsivas
• O exemplo a seguir mostra
como criar quatro colunas
de largura igual começando
em tablets e escalando
para desktops
extragrandes. Em
telemóveis ou em telas
com menos de 576 px de
largura, as colunas
serão empilhadas
automaticamente umas
sobre as outras.
Professor / Formador Marcos Alvarães 27
Exemplo de Bootstrap.5
Professor / Formador Marcos Alvarães 28
Duas colunas responsivas desiguais
Professor / Formador Marcos Alvarães 29
Exemplo de Bootstrap.6
Professor / Formador Marcos Alvarães 30
Estrutura Básica de uma Grid Bootstrap 4
Exemplo de Bootstrap.7
Professor / Formador Marcos Alvarães 31
Opções de grid
Professor / Formador Marcos Alvarães 32
Exemplo de grid de bootstrap 4:
empilhado na horizontal
Professor / Formador Marcos Alvarães 33
Exemplo de Bootstrap.8
Professor / Formador Marcos Alvarães 34
Colunas de layout automático
Professor / Formador Marcos Alvarães 35
Exemplo de Bootstrap.9
Professor / Formador Marcos Alvarães 36
Exemplos
de Bootstrap 4 Grid
Professor / Formador Marcos Alvarães 37
Exemplos de Bootstrap 4 Grid
Professor / Formador Marcos Alvarães 38
Exemplo de Bootstrap.10
Professor / Formador Marcos Alvarães 39
Três colunas iguais
com números
• Podemos utilizar números para
controlar a largura da coluna. Apenas
certifique-se de que a soma seja 12 ou
menos (não é necessário utilizar todas
as 12 colunas disponíveis):
Professor / Formador Marcos Alvarães 40
Exemplo de Bootstrap.11
Professor / Formador Marcos Alvarães 41
Três colunas
desiguais
• Para criar colunas desiguais, devemos
utilizar números. O exemplo a seguir
criará uma divisão de 25% / 50% /
25%:
Professor / Formador Marcos Alvarães 42
Exemplo de Bootstrap.12
Professor / Formador Marcos Alvarães 43
Professor / Formador Marcos Alvarães 44
Exemplo de Bootstrap.13
Professor / Formador Marcos Alvarães 45
Professor / Formador Marcos Alvarães 46
Exemplo de Bootstrap.14
Professor / Formador Marcos Alvarães 47
Row Cols
• Podemos controlar quantas
colunas devem aparecer
próximas umas das outras
(independentemente de
quantas colunas), com as
classes .row-cols-*
Professor / Formador Marcos Alvarães 48
Exemplo de Bootstrap.15
Professor / Formador Marcos Alvarães 49
Professor / Formador Marcos Alvarães 50
Exemplo de Bootstrap.16
Professor / Formador Marcos Alvarães 51
Professor / Formador Marcos Alvarães 52
Exemplo de Bootstrap.17
Professor / Formador Marcos Alvarães 53
Professor / Formador Marcos Alvarães 54
Exemplo de Bootstrap.18
Professor / Formador Marcos Alvarães 55
Professor / Formador Marcos Alvarães 56
Exemplo de Bootstrap.19
Professor / Formador Marcos Alvarães 57
Professor / Formador Marcos Alvarães 58
Exemplo de Bootstrap.20
Professor / Formador Marcos Alvarães 59
Professor / Formador Marcos Alvarães 60
Exemplo de Bootstrap.21
Professor / Formador Marcos Alvarães 61
Exemplo de
construção de um
layout
Professor / Formador Marcos Alvarães 62
Professor / Formador Marcos Alvarães 63
• Um layout simples porém bastante utilizado atualmente.
• O layout será subdividido em:
▪ Header
▪ Logo
▪ Navbar
▪ Menu
▪ Formulário de Pesquisa (Search)
▪ Main
▪ Banner
▪ Área de artigos
▪ Footer
▪ Copyright
▪ Logo
Professor / Formador Marcos Alvarães 64
ESTRUTURA DO
PROJETO
• Primeiro, vamos criar nossa estrutura de pastas e
fazer o download do Bootstrap.
• Crie um novo diretório em seu computador com o
nome “layout_bootstrap” e dentro crie as seguintes
pastas:
• layout_bootstrap
– img
– css
– js
Professor / Formador Marcos Alvarães 65
• Faça o download do Bootstrap através do link abaixo:
– Download Bootstrap
• Após o download, copie o ficheiro bootstrap.min.css e cole dentro da
pasta /css e o ficheiro bootstrap.min.js e cole dentro da pasta /js do
seu projeto.
• Na raiz, crie um ficheiro chamado index.html.
• A estrutura do projeto deverá ficar assim:
Professor / Formador Marcos Alvarães 66
INICIAR O CÓDIGO (Layout.1)
Professor / Formador Marcos Alvarães 67
• Acredito que já saiba o que o código acima irá interpretar,
porém existe uma <tag> extremamente importante para o
desenvolvimento de páginas responsivas, a meta tag
“viewport“, sem ela a responsividade do site não irá funcionar,
portanto nunca esqueça dela.
• Perceba que a inclusão dos ficheiros que baixamos do
Bootstrap, o bootstrap.min.css e o bootstrap.min.js, além de
incluir também o jQuery, pois sem ele alguns componentes do
Bootstrap não irão funcionar.
• Sempre faço a inclusão dos scripts (js) no final do <body>, pois
assim quero que sejam apenas renderizados depois do
conteúdo, tornando assim o site mais rápido.
Professor / Formador Marcos Alvarães 68
CODIFICAR O HEADER (Layout.2)
Professor / Formador Marcos Alvarães 69
• Antes de explicar o código, guarde a logo IEFP dentro de sua
pasta /img com o nome de “IconeIEFP.jpg“.
– CLASSES UTILITÁRIAS
• Utilizando o HTML5, construímos o nosso cabeçalho com a
tag <header> e acrescentamos a classe utilitária “p-5“.
• Assim como o “p-“, temos o “m-“, “float-“, “border-“,
“position-“, “d-“, “text-center” e muitas outras. Cada uma
delas, tem a funcionalidade de trazer ao elemento alguma
configuração CSS, no caso do “p“, estamos adicionando
“padding” ao elemento e o “5” retrata quanto de “padding”
queremos adicionar.
• Veja mais informações sobre classes utilitárias em: Bootstrap
Spacing.
• É muito importante que acesse o site do Bootstrap e leia sua
documentação.
Professor / Formador Marcos Alvarães 70
Navbar e o
Formulário de
Pesquisa (Layout.3)
• Para a construção do layout, iremos
utilizar vários componentes prontos,
portanto para o desenvolvimento
do Navbar não será diferente.
• Entre no site http://getbootstrap.com/ e
vá na parte de “Components“.
• Selecione no menu lateral o item
“Navbar” e vamos copiar, ISSO MESMO,
COPIAR ☺, o código do exemplo
“Default Navbar”.
• Copie o código e cole logo após o
</header>.
Professor / Formador Marcos Alvarães 71
Professor / Formador Marcos Alvarães 72
Entender o Navbar
• Antes de passarmos para o próximo passo, é importante que
conheçam algumas definições da estrutura do “navbar”.
Professor / Formador Marcos Alvarães 73
Professor / Formador Marcos Alvarães 74
Professor / Formador Marcos Alvarães 75
• Agora que já analisamos a estrutura do nosso
“navbar“, vamos adaptá-lo para o nosso site.
• Apenas remova a <div class=“navbar-
brand”> e guarde o ficheiro.
Professor / Formador Marcos Alvarães 76
O CONTAINER
• A classe “container” é umas das classes
mais importantes do Bootstrap, ela acompanha
o framework desde o seu inicio.
• Esta classe representa a largura máxima (max-
width) do seu site, podendo ser:
• Veja mais em: Bootstrap Containers.
• Além da classe “.container” adicionamos a classe
utilitária “.text-center“, que faz com que os
elementos recebam a configuração CSS de
“text-align: center“, posicionando assim a
nossa logo no centro da página.
CLASSE ESPECIFICAÇÃO
.container
Limita a largura máxima “max-width” do site
e o deixa fixo ao centro, respeitando sempre
o tamanho do dispositivo, não ultrapassando
os 1200px.
.container-
fluid
Deixa a largura máxima do site em 100%.
Muito utilizado para layout de sistemas.
Professor / Formador Marcos Alvarães 77
Main 1º parte (Layout.4)
Professor / Formador Marcos Alvarães 78
Professor / Formador Marcos Alvarães 79
Main 2º parte (Layout.5)
Professor / Formador Marcos Alvarães 80
Professor / Formador Marcos Alvarães 81
Professor / Formador Marcos Alvarães 82
Footer (Layout.6)
Professor / Formador Marcos Alvarães 83
Professor / Formador Marcos Alvarães 84
Scripts (Layout.7)
Professor / Formador Marcos Alvarães 85
